<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogDetail.visible"
    :width="900"
    :title="dialogDetail.title"
    draggable
    close-icon="CloseBold"
    @close="closeDialog(false)"
  >
    <el-descriptions v-loading="loading" :column="2" border>
      <el-descriptions-item label="项目名称">{{ detailInfo.projectName }}</el-descriptions-item>
      <el-descriptions-item label="项目编号">{{ detailInfo.projectNum }}</el-descriptions-item>
      <el-descriptions-item label="缴纳主体名称">{{ detailInfo.paymentName }}</el-descriptions-item>
      <el-descriptions-item label="缴纳主体统一社会信用代码">{{ detailInfo.paymentCode }}</el-descriptions-item>
      <el-descriptions-item label="账户编号">{{ detailInfo.guaranteeAccountCode }}</el-descriptions-item>
      <el-descriptions-item label="收支方式">{{ detailInfo.guaranteeAccountTypeName }}</el-descriptions-item>
      <!-- 保证金账户 -->
      <el-descriptions-item label="缴存类型">{{ detailInfo.depositeTypeName }}</el-descriptions-item>
      <el-descriptions-item label="应缴金额">{{ detailInfo.payable }}</el-descriptions-item>
      <el-descriptions-item label="缴纳金额">{{ detailInfo.paid }}</el-descriptions-item>
      <el-descriptions-item label="差异化缴存金额">{{ detailInfo.difference }}</el-descriptions-item>
      <el-descriptions-item label="缴存起始日期">{{ detailInfo.startDate }}</el-descriptions-item>
      <el-descriptions-item label="申请退还金额">{{ detailInfo.applyAmount }}</el-descriptions-item>
      <el-descriptions-item label="申请日期">{{ detailInfo.createTime }}</el-descriptions-item>
      <el-descriptions-item label="申请理由">{{ detailInfo.applyReason }}</el-descriptions-item>
      <el-descriptions-item label="退还决定单位">{{ detailInfo.refundOrganization }}</el-descriptions-item>
      <el-descriptions-item label="退还决定单位统一社会信用代码">
        {{ detailInfo.refundOrganizationCode }}
      </el-descriptions-item>
      <el-descriptions-item label="动用通知文书号">{{ detailInfo.notificationLetter }}</el-descriptions-item>
      <el-descriptions-item label="退还日期">{{ detailInfo.refundTime }}</el-descriptions-item>
      <el-descriptions-item label="退还金额">{{ detailInfo.refundAmount }}</el-descriptions-item>
      <el-descriptions-item label="退还说明">{{ detailInfo.refundAmount }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script lang="ts" setup>
import { GetProjectGuaranteeRefund } from "@/api/guarantee/index";

const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "审核退还信息",
      footBtn: "提交",
      id: 0,
    }),
  },
});

const { dialogDetail } = toRefs(props);

const emit = defineEmits(["sendClose"]);

const loading = ref(false);
const detailInfo = ref<any>({});

onMounted(() => {
  loading.value = true;
  GetProjectGuaranteeRefund(dialogDetail.value.id)
    .then((res) => {
      Object.assign(detailInfo.value, res.data);
    })
    .finally(() => {
      loading.value = false;
    });
});

/**
 * 关闭弹窗
 */
function closeDialog(query: boolean) {
  emit("sendClose", query);
}
</script>

<style lang="scss" scoped>
.d_left {
  margin-left: 10px;
}
:deep(.el-form-item) {
  flex-wrap: wrap;
}
.dialog_footer {
  // display: flex;
  // justify-content: center;
}

:deep(.el-input) {
  width: 80%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-input__wrapper) {
  width: 100%;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
</style>
